<template>
    <div>
        <Layout class="layout" class-prefix="detail">
            <Type @update:value="onUpdateType" />
            <DetailItem :data-source="groupedList" :current-type="currentType"/>
        </Layout>
    </div>
</template>


<script lang="ts">
    import Vue from 'vue';
    import Type from "@/components/Money/Type.vue";
    import DetailItem from '@/components/Details/DetailItem.vue';
    import {Component} from 'vue-property-decorator';
    import dayjs from 'dayjs';
    import clone from '@/lib/clone';
    import { API_GetMoney } from "@/api/money"

    @Component({components:{Type,DetailItem}})
    export default class Details extends Vue {
        currentType = 1;
        groupedList = [];

        // 0. 获取全部明细记录
        created(){
            this.getRecords();
        };

        getRecords() {
            API_GetMoney({ type: this.currentType }).then(res => {
                if(res.data.code === 0) {
                    this.groupedList = res.data.result.result;
                }
            })
        };

        // 1. 修改转入转出类型
        onUpdateType(value:string){
            this.currentType = value;
            this.getRecords();
        };
    }
</script>



<style lang="scss">  
    .detail-content {
        flex-grow: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
</style>